<template>
	<view class="user">
		<!-- 头部 -->
		<view class="user-wrap">
			<u-icon class="setting" name="setting-fill" color="#ffffff"></u-icon>
			<view class="info" @click="login">
				<image class="zwyFly" :src="userInfo.headPicUrl" mode=""></image>
				<!-- <u-avatar  size="large" :src="userInfo.headPicUrl"></u-avatar> -->
				<view class="nickname">{{ userInfo.nickName }}</view>
			</view>
		</view>

		<!-- 个人认证 -->
		<view class="order-status">
			<view class="status-wrap">
				<!-- 单元格 -->
				<view class="cell" @click="authenticationClick">
					<view class="cell-left">
						<image class="cell-icon" src="/static/images/icon-order.png" mode="aspectFill"></image>
						<view class="cell-text">{{$t('mypage.Personalcerti')}}</view>
					</view>
					<u-icon name="arrow-right" color="#cfcfcf"></u-icon>
				</view>
			</view>
		</view>

		<!-- 用户功能 -->
		<view class="com-item">
			<view class="com-wrap">
				<view class="cell" v-for="(item, index) in userList" :key="index" @click="navRecordlist(item.id)">
					<view class="cell-left">
						<image class="cell-icon" :src="item.icon" mode="aspectFill"></image>
						<view class="cell-text">{{ item.title }}</view>
					</view>
					<u-icon name="arrow-right" color="#cfcfcf"></u-icon>
				</view>
			</view>
		</view>

		<!-- 用户服务 -->
		<view class="com-item">
			<view class="com-wrap">
				<view class="cell" v-for="(item, index) in serverList" :key="index" @click="UserService(index)">
					<view class="cell-left">
						<image class="cell-icon" :src="item.icon" mode="aspectFill"></image>
						<view class="cell-text">{{ item.title }}</view>
					</view>
					<view style="float: right;color: #cccccc;">{{item.text}}
						<u-icon style="margin-left: 20rpx;" name="arrow-right" color="#cfcfcf"></u-icon>
					</view>
				</view>
			</view>
		</view>
		<!-- 退出登录 -->
		<button v-show="userInfo.show" @click="removeshow=true" style="width: 80%;margin: 50rpx auto;" type="warn">{{$t('mypage.signout')}}</button>
		<u-modal v-model="removeshow" @confirm="removeClick" :show-cancel-button="true" :content="$t('mypage.Aresignout')"></u-modal>
		<u-toast ref="uToast" />
	</view>
</template>
<script>
	import {
		getToken,
		setToken,
		removeToken
	} from '@/util/tokeCookien.js'
	export default {
		data() {
			return {
				removeshow: false,
				userInfo: {
					headPicUrl: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
					nickName: 'Hi，您尚未登录',
					show: true
				},
				userList: [{
						id: 3,
						title: '关注列表',
						icon: '/static/images/icon-address.png',
						path: 'address-list'
					},
					{
						id: 1,
						title: '收藏列表',
						icon: '/static/images/icon-collect.png',
						path: 'collect-list'
					},
					{
						id: 2,
						title: '历史记录',
						icon: '/static/images/icon-foot.png',
						path: 'browse-list'
					}
				],
				serverList: [
					/* {
						title: '客服中心',
						icon: '/static/images/icon-kefu.png',
						path: 'kefu'
					},
					{
						title: '帮助中心',
						icon: '/static/images/icon-help.png',
						path: 'help'
					}, */
					{
						title: '检查更新',
						icon: '/static/images/icon-about.png',
						text: '1.0.0'
					},
					{
						title: '关于我们',
						icon: '/static/images/icon-about.png',
					}
				]
			};
		},
		onShow() {
			let datat = getToken()
			getToken() ? this.userInfo.show = true : this.userInfo.show = false
			this.userInfo.headPicUrl = datat.avatar_url
			this.userInfo.nickName = datat.name || this.$i18n.messages[this.$i18n.locale].mypage.Hilogged
			this.serverList[0].title = this.$i18n.messages[this.$i18n.locale].mypage.updates
			this.serverList[1].title = this.$i18n.messages[this.$i18n.locale].mypage.AboutUs
			this.userList[0].title = this.$i18n.messages[this.$i18n.locale].recordlist.followList
			this.userList[1].title = this.$i18n.messages[this.$i18n.locale].recordlist.NewsStore
			this.userList[2].title = this.$i18n.messages[this.$i18n.locale].recordlist.historyList
		},
		methods: {
			//个人认证
			authenticationClick() {
				if (getToken()) {
					uni.showToast({
						title: '待完善',
						icon: 'none',
						duration: 2000
					});
					/* uni.navigateTo({
						url: '/pages/mypage/authentication/authentication'
					}); */
				} else {
					this.$showModalLogin()
				}
			},
			//检查更新/关于我们
			UserService(nubid) {
				console.log(nubid)
				if (nubid == 1) {
					uni.navigateTo({
						url: '/pages/mypage/aboutus/aboutus'
					});
				}

				/* uni.navigateTo({
					url: '/pages/choosemusic/choosemusic'
				}); */
			},
			//跳转 收藏/历史/关注页面
			navRecordlist(id) {
				if (getToken()) {
					uni.navigateTo({
						url: `/pages/mypage/recordlist/recordlist?tabindex=${id}`
					})
				} else {
					this.$showModalLogin()
				}
			},
			//点击登录
			login() {
				const _this = this
				if (!getToken()) {
					this.$showModalLogin()
				} else {
					uni.chooseImage({
						count: 1, //默认9
						success: (chooseImageRes) => {
							const tempFilePaths = chooseImageRes.tempFilePaths[0];
							this.$myUploadFile({
									url: '/user/upload-avatar',
									header: {},
									formData: {},
									name: 'file',
									filePath: tempFilePaths
								}).then(function(response) {
									
									if (response.code == 200) {
										_this.$refs.uToast.show({
											title: _this.$i18n.messages[_this.$i18n.locale].mypage.Avatarok,
											type: 'success'
										})
										let datat = getToken()
										_this.userInfo.headPicUrl = response.data
										datat.avatar_url = response.data
										setToken(datat)
										console.log(_this.userInfo.headPicUrl)
									}
								})
								.catch(function(error) {
									console.log(error);
								});
						}
					});
				}
			},
			//退出登录
			removeClick() {
				this.userInfo.show = false
				this.userInfo.headPicUrl = 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
				this.userInfo.nickName = this.$i18n.messages[this.$i18n.locale].mypage.Hilogged,
				removeToken()
				this.$refs.uToast.show({
					title: this.$i18n.messages[this.$i18n.locale].mypage.Logok,
					type: 'success'
				})

			}
		}
	};
</script>

<style lang="scss" scoped>
	.user {
		height: 100vh;
		background: #f2f2f2;

		.user-wrap {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 60vw;
			padding: 30rpx;
			z-index: 9;
			border-radius: 0 0 20% 20%;
			vertical-align: middle;
			background: url('/static/images/mybj.jpg') no-repeat;
			background-size: cover;

			.setting {
				color: #fff;
				position: absolute;
				top: 60rpx;
				right: 30rpx;
				font-size: 50rpx;
			}

			.info {
				position: absolute;
				text-align: center;
				.zwyFly{
					width: 130rpx;
					height: 130rpx;
					border-radius: 50px;
				}
				.avatar {
					width: 150rpx;
					height: 150rpx;
					border-radius: 50%;
				}

				.nickname {
					color: #fff;
					font-size: 28rpx;
				}
			}
		}

		.order-status {
			padding: 0 20rpx;
			margin-top: -10vw;

			.status-wrap {
				border-radius: 25rpx;
				overflow: hidden;

				.status-list {
					display: flex;
					justify-content: space-evenly;
					align-items: center;
					background: #fff;
					padding-top: 30rpx;
					padding-bottom: 30rpx;

					.status-item {
						flex: 1;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;

						.item-icon {
							line-height: 1;
							font-size: 65rpx;
							color: #bbb;
						}

						.item-text {
							font-size: 28rpx;
							color: #666;
							margin-top: 5rpx;
						}
					}
				}
			}
		}

		.com-item {
			padding-left: 20rpx;
			padding-right: 20rpx;
			margin-top: 20rpx;

			.com-wrap {
				border-radius: 25rpx;
				overflow: hidden;
			}
		}

		.cell {
			height: 80rpx;
			padding-left: 20rpx;
			padding-right: 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background: #fff;
			border-bottom: 1px solid #f8f8f8;

			&:active {
				background: #f2f2f2;
			}

			&:last-child {
				border-bottom: none !important;
			}

			.cell-left {
				display: flex;
				align-items: center;

				.cell-icon {
					width: 50rpx;
					height: 50rpx;
				}

				.cell-text {
					color: #666;
					font-size: 28rpx;
					margin-left: 20rpx;
				}
			}

			icon {
				font-size: 40rpx;
				color: #999;
			}
		}
	}
</style>
